<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Card, Spin } from 'ant-design-vue'
import MarkdownIt from 'markdown-it'

defineOptions({ name: 'IntroducePage' })

const markdownContent = ref('')
const htmlContent = ref('')
const loading = ref(true)

// 初始化 markdown-it
const md = new MarkdownIt({
  html: true,
  linkify: true,
  typographer: true
})

// README.md 内容
const readmeContent = `# CodeWin - AI驱动的角色扮演与语音对话平台

<div align="center">
  <img src="/logo.svg" alt="CodeWin Logo" width="120" height="120">
  
  <h3>沉浸式ai角色对话体验，让每个角色都栩栩如生</h3>
  
  [![Vue 3](https://img.shields.io/badge/Vue-3.5.21-4FC08D?style=flat-square&logo=vue.js)](https://vuejs.org/)
  [![TypeScript](https://img.shields.io/badge/TypeScript-5.8.3-3178C6?style=flat-square&logo=typescript)](https://www.typescriptlang.org/)
  [![Ant Design Vue](https://img.shields.io/badge/Ant%20Design%20Vue-4.2.6-0170FE?style=flat-square&logo=ant-design)](https://antdv.com/)
  [![Vite](https://img.shields.io/badge/Vite-7.1.6-646CFF?style=flat-square&logo=vite)](https://vitejs.dev/)
</div>

### 团队名称： codewin
### 作者： 叶冬 姜路信 邵希尔

## ✨ 特性

- 🎭 **AI角色扮演** - 智能角色对话系统，支持多种角色类型
- 🎵 **语音交互** - 实时语音识别与TTS语音合成
- 📚 **AI听书** - 智能文本朗读，支持多角色配音
- 👥 **多人聊天** - 实时多人聊天室，支持角色扮演
- 📖 **知识库管理** - 智能知识库系统，增强对话体验
- 🎨 **现代化UI** - 基于Ant Design Vue的精美界面
- 🌈 **主题定制** - 蓝紫色主题，支持极光背景效果

## 🚀 快速开始

### 环境要求

- Node.js >= 16.0.0
- pnpm >= 9.15.2

### 安装依赖

\`\`\`bash
# 克隆项目
git clone https://gitee.com/jlx20020820/codewin_frontend
cd codewin_frontend

# 安装依赖
pnpm install
\`\`\`

### 开发环境

\`\`\`bash
# 启动开发服务器
pnpm dev

# 生成API类型定义
pnpm api:generate
\`\`\`

### 构建部署

\`\`\`bash
# 构建生产版本
pnpm build

# 预览构建结果
pnpm preview
\`\`\`

## 🏗️ 技术架构

### 核心技术栈

- **前端框架**: Vue 3.5.21 + TypeScript 5.8.3 + Composition API
- **构建工具**: Vite 7.1.6
- **UI组件库**: Ant Design Vue 4.2.6
- **图标库**: Lucide Vue Next 0.544.0 + Ant Design Icons 7.0.1
- **样式框架**: UnoCSS 66.5.1 (原子化CSS)
- **状态管理**: Pinia 3.0.3
- **路由管理**: Vue Router 4.5.1
- **HTTP客户端**: Axios 1.12.2
- **包管理器**: pnpm 9.15.2

### 项目结构

\`\`\`
src/
├── api/              # API接口层
│   ├── generated/    # 自动生成的API类型
│   └── roleService.ts
├── components/       # 公共组件
│   ├── AudioBook/    # AI听书组件
│   ├── Common/       # 通用组件
│   ├── MultiChat/    # 多人聊天组件
│   ├── Profile/      # 用户资料组件
│   ├── Role/         # 角色管理组件
│   └── ...
├── views/           # 页面组件
│   ├── AudioBook.vue
│   ├── Home.vue
│   ├── Role.vue
│   └── ...
├── stores/          # 状态管理
├── router/          # 路由配置
└── style.css        # 全局样式
\`\`\`

## 🎯 核心功能

### 1. AI角色扮演
- 支持历史人物、虚构角色等多种类型
- 智能对话生成，角色特征鲜明
- 可自定义角色属性和知识库

### 2. 语音交互系统
- 实时语音识别 (ASR)
- 文本转语音 (TTS)
- 多种音色选择
- 语音播放控制

### 3. AI听书功能
- 文件上传与文本解析
- 多角色配音系统
- 音频播放器控制
- 实时文本预览

### 4. 多人聊天室
- 实时消息同步
- 角色扮演模式
- 聊天室管理
- 在线用户显示

### 5. 系统管理
- 用户管理
- 角色管理
- 语音管理
- 知识库管理

## 🎨 设计系统

### 主题色彩
- **主色调**: 蓝紫色系 (#6366f1)
- **辅助色**: 蓝色系 (#60a5fa, #3b82f6)
- **渐变效果**: 支持极光背景动画

### 组件规范
- 统一的设计语言
- 响应式布局
- 现代化交互体验
- 无障碍访问支持

## 📱 浏览器支持

- Chrome >= 88
- Firefox >= 78
- Safari >= 14
- Edge >= 88

## 🤝 贡献指南

1. Fork 本仓库
2. 创建特性分支 (\`git checkout -b feature/AmazingFeature\`)
3. 提交更改 (\`git commit -m 'Add some AmazingFeature'\`)
4. 推送到分支 (\`git push origin feature/AmazingFeature\`)
5. 打开 Pull Request

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情

## 📞 联系我们

- 邮箱: contact@codewin.top
- 网站: www.codewin.top

---

<div align="center">
  <p>Made with ❤️ by CodeWin Team</p>
  <p>© 2025 CodeWin. All rights reserved.</p>
</div>`

onMounted(() => {
  try {
    markdownContent.value = readmeContent
    htmlContent.value = md.render(readmeContent)
    loading.value = false
  } catch (error) {
    console.error('Error rendering markdown:', error)
    loading.value = false
  }
})
</script>

<template>
  <div class="min-h-screen bg-transparent py-8">
    <div class="container mx-auto px-6 max-w-5xl ">
      <Spin :spinning="loading" size="large">
        <Card class="shadow-xl border-0 overflow-hidden">
          <div 
            class="markdown-content prose prose-lg max-w-none"
            v-html="htmlContent"
          />
        </Card>
      </Spin>
    </div>
  </div>
</template>

<style scoped>
/* Markdown 样式 */
.markdown-content {
  line-height: 1.7;
  color: #374151;
}

/* 标题样式 */
.markdown-content :deep(h1) {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e5e7eb;
}

.markdown-content :deep(h2) {
  font-size: 2rem;
  font-weight: 600;
  color: #374151;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}

.markdown-content :deep(h3) {
  font-size: 1.5rem;
  font-weight: 600;
  color: #4b5563;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

/* 段落样式 */
.markdown-content :deep(p) {
  margin-bottom: 1rem;
  line-height: 1.8;
}

/* 列表样式 */
.markdown-content :deep(ul) {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.markdown-content :deep(li) {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.markdown-content :deep(li strong) {
  color: #1f2937;
  font-weight: 600;
}

/* 代码块样式 */
.markdown-content :deep(pre) {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  overflow-x: auto;
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.875rem;
  line-height: 1.5;
}

.markdown-content :deep(code) {
  background: #f3f4f6;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.875rem;
  color: #dc2626;
}

.markdown-content :deep(pre code) {
  background: none;
  padding: 0;
  color: #374151;
}

/* 链接样式 */
.markdown-content :deep(a) {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.markdown-content :deep(a:hover) {
  color: #1d4ed8;
  text-decoration: underline;
}

/* 徽章样式 */
.markdown-content :deep(img[src*="shields.io"]) {
  display: inline-block;
  margin: 0 0.25rem 0.5rem 0;
}

/* 居中对齐 */
.markdown-content :deep(div[align="center"]) {
  text-align: center;
  margin: 2rem 0;
}

.markdown-content :deep(div[align="center"] img) {
  margin: 1rem auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.markdown-content :deep(div[align="center"] h3) {
  color: #6366f1;
  font-size: 1.25rem;
  margin: 1rem 0;
  font-weight: 500;
}

/* 分隔线样式 */
.markdown-content :deep(hr) {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
  margin: 3rem 0;
}

/* 表格样式 */
.markdown-content :deep(table) {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.markdown-content :deep(th),
.markdown-content :deep(td) {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

.markdown-content :deep(th) {
  background: #f9fafb;
  font-weight: 600;
  color: #374151;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .markdown-content :deep(h1) {
    font-size: 2rem;
  }
  
  .markdown-content :deep(h2) {
    font-size: 1.5rem;
  }
  
  .markdown-content :deep(pre) {
    padding: 1rem;
    font-size: 0.8rem;
  }
}
</style>